<template>
	<view class="container">
		<!-- 导航栏 -->
		<navView  title="大宗采购绩效评价系统"></navView>

		<view class="mainContentView">
			<!-- 物料类型选择 -->
			<view class="materialTypePart">
				<view class="materialType-tabsView">
					<u-tabs :list="materialTypeLists" :is-scroll="false" :current="materialTabCurIndex"
						item-width="120" height="88" barWidth="64" barHeight="3" font-size="28" active-color="#0672BF"
						inactive-color="#333333" @change="materialGroupTabChange"></u-tabs>
				</view>
				<view class="materialType-moreBtn" @click="toMoreMaterial">更多</view>
			</view>

			<!-- 近期价格趋势 -->
			<view class="priceTrendPart">
				<recentPriceTrend :curMaterial="curMaterial"></recentPriceTrend>
			</view>

			<!-- 采购订单量 -->
			<view class="orderQuantityPart">
				<view class="orderQuantity-top">
					<view class="orderQuantity-top-title">采购订单量</view>
					<view class="orderQuantity-top-more" @click="toMoreOrder">更多</view>
				</view>
				<view class="orderQuantity-chart">
					<au-chartPie :chartPieData="chartPieData"></au-chartPie>
				</view>
			</view>
		</view> 
	</view> 
</template>

<script>
	import recentPriceTrend from '../../components/recentPriceTrend.vue'
	import navView from '../../components/navView.vue'
	export default {
		components: {
			recentPriceTrend,
			navView,
		},
		data() {
			return {
				//物料类型列表
				materialTypeLists: [],
				//当前选中的物料类型index
				materialTabCurIndex: 0,
				//当前选中的物料
				curMaterial: {},
				//采购订单量饼图数据
				chartPieData: {}
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			//初始化数据
			initData() {
				this.requestAllMaterial(() => {
					this.materialTabCurIndex = 0;
					this.refreshData();
				});
			},

			//刷新数据
			refreshData() {
				this.curMaterial = this.materialTypeLists[this.materialTabCurIndex];
				this.requestPieData()
			},

			//获取所有基础物料
			requestAllMaterial(successBlock) {
				this.$u.api.requestAllMaterial().then(res => {
					this.materialTypeLists = res.slice(0, 5);
					successBlock();
				}).catch(err => {
					console.error(err)
				})
			},

			//查询采购订单量饼图数据
			requestPieData() {
				let params = {
					baseMaterialId: this.curMaterial.baseMaterialPkid,
				};
				this.$u.api.requestPieData(params).then(res => {
					// 处理饼图数据
					let pieData = [];
					for (let item of res) {
						let descripetion = item.supplier + ':' + item.buycount + '订单,' + item.ratio + '%';
						let newItem = {
							'value': item.buycount,
							'descripetion': descripetion
						}
						pieData.push(newItem)
					}
					this.chartPieData = {
						pieData: pieData
					}

				}).catch(err => {
					console.error(err)
				})
			},

			//物料组tab切换
			materialGroupTabChange(index) {
				this.materialTabCurIndex = index;
				this.refreshData()
			},
  
			//跳转到更多物料页面
			toMoreMaterial() {
				uni.navigateTo({
					url: 'moreMaterial',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			//跳转到更多订单页面
			toMoreOrder() {
				uni.navigateTo({
					url: 'purchaseOrder?curMaterial=' + JSON.stringify(this.curMaterial),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F5F5;
	}

	.mainContentView {}

	/* 物料类型选择 */
	.materialTypePart {
		height: 88rpx;
		padding: 0rpx 30rpx;
		background-color: #FFFFFF;
	}

	.materialType-tabsView {
		float: left;
	}

	.materialType-moreBtn {
		width: 60rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 26rpx;
		color: #0672BF;
		float: right;
	}

	/* 近期价格趋势 */
	.priceTrendPart {
		background-color: #FFFFFF;
		padding: 0rpx 30rpx 30rpx 30rpx;
	}

	.priceTrendPart-row2 {
		width: 100%;
		height: 50rpx;
	}

	.priceTrendPart-title {
		float: left;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.priceTrendPart-comprehensiveFilter {
		width: 200rpx;
		height: 50rpx;
		border: 1rpx solid #4EAAE6;
		border-radius: 10rpx;
		float: right;
		text-align: center;
		padding: 0rpx 25rpx;
		font-size: 29rpx;
		color: #333333;
	}

	.timeBtn-arrowDown {
		float: right;
		margin-left: 10rpx;
		margin-top: 15rpx;
	}

	.chooseTime {
		margin-top: 30rpx;
	}

	.chart {
		margin: 20rpx 10rpx;
	}

	.compareViewContainer {
		text-align: center;
	}

	.compareView {
		height: 40rpx;
		display: inline-block;
	}

	.compareView-selectBox {
		width: 24rpx;
		height: 24rpx;
		margin: 8rpx 0rpx;
		border: 1rpx solid #4EAAE6;
		border-radius: 50%;
		float: left;
	}

	.compareView-selectBox-check {
		position: absolute;
		margin-left: -10rpx;
	}

	.compareView-title {
		line-height: 40rpx;
		font-size: 24rpx;
		color: #333333;
		float: left;
		margin-left: 10rpx;
	}

	.compareView-choosePort {
		height: 40rpx;
		border: 1rpx solid #D2D2D2;
		border-radius: 10rpx;
		float: left;
		margin: 0rpx 10rpx;
		padding: 0rpx 25rpx;
	}

	.toViewDetail {
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: linear-gradient(90deg, #4EAAE6 0%, #0672BF 100%);
		border-radius: 10rpx;
		text-align: center;
		margin: 0 auto;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	/* 采购订单量 */
	.orderQuantityPart {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		padding-left: 30rpx;
	}

	.orderQuantity-top {
		width: 100%;
		height: 60rpx;
	}

	.orderQuantity-top-title {
		float: left;
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.orderQuantity-top-more {
		width: 104rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: linear-gradient(90deg, #4EAAE6 0%, #0672BF 100%);
		border-radius: 20rpx 0px 0px 20rpx;
		float: right;
		margin: 20rpx 0rpx 0rpx 0rpx;
		text-align: center;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.orderQuantity-chart {
		margin: 10rpx 0rpx;
	}
</style>
